<template>
    <view class="page">
        <getphonenumber />
        <!-- 		<z-paging
			ref="paging"
			:refresher-out-rate="0.8"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
			bg-color="#fff"
			:refresher-status.sync="refresherStatus"
			v-model="dataList"
			@query="queryList"
		> -->
        <view class="search flex_wrap" slot="top">
            <template>
                <view class="search_t">
                    <view style="width: 500rpx; margin: 10rpx 0 0 20rpx">
                        <u-input
                            prefixIcon="search"
                            border="none"
                            v-model="fillterParams.goodsName"
                            prefixIconStyle="font-size: 48rpx;color: #999"
                            placeholderStyle="font-size: 28rpx;color: #999"
                            :customStyle="{ background: '#E1E1E1' }"
                            placeholder="请输入商品关键字"
                        ></u-input>
                    </view>
                    <view class="search_type" @click="doSearch">搜索</view>
                </view>
            </template>
        </view>

        <!-- 搜索记录 -->
        <view class="searchRecord" v-if="isRecord === true">
            <text
                style="margin-left: 8px; font-weight: bolder; font-size: 32rpx"
                >最近搜索</text
            >
            <view class="recordTag">
                <view
                    class="tag"
                    slot="cell"
                    v-for="(item, index) in recordList"
                    :key="index"
                    @click="recordSearch(index)"
                    >{{ item }}</view
                >
            </view>
            <view class="" v-if="isData === true">
                <img
                    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
                    alt=""
                    style="
                        width: 308rpx;
                        height: 308rpx;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-left: -154rpx;
                        margin-top: -154rpx;
                    "
                />
            </view>
        </view>

        <!-- 查询结果 -->
        <view class="item flex_wrap row_between" v-if="isResult === true">
            <view
                class="cellBox"
                slot="cell"
                v-for="(item, index) in dataList"
                :key="index"
            >
                <u-cell
                    :iconStyle="cellIconStyle"
                    :titleStyle="cellTitleStyle"
                    size="large"
                    :arrow="false"
                    :border="false"
                >
                    <view slot="title" class="celldetail">
                        <image
                            @tap="to_goodsDetail(item.id)"
                            :src="item.thumbnail"
                            class="celldetail-img"
                            mode="aspectFit"
                        ></image>
                        <view class="celldetail-t flex_wrap">
                            <text
                                @tap="to_goodsDetail(item.id)"
                                style="font-size: 28rpx; color: #333333"
                                >{{ item.goodsName }}</text
                            >
                        </view>
                        <view class="shopping-cart-box">
                            <view class="flex_wrap shopping-cart">
                                <view>
                                    <text style="font-size: 24rpx">￥</text>
                                    <text
                                        @tap="to_goodsDetail(item.id)"
                                        style="
                                            font-weight: 600;
                                            font-size: 34rpx;
                                        "
                                        >{{ goodsSkuListPrice(item) }}</text
                                    >
                                    <text style="font-size: 18rpx">起</text>
                                </view>
                                <!-- <u-icon
                                    name="/static/img/shop/shopping-cart.png"
                                    size="24"
                                    @click="to_goodsDetail(item.id)"
                                ></u-icon> -->
                            </view>
                        </view>
                    </view>
                </u-cell>
            </view>
            <img
                v-if="dataList.length === 0"
                src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
                alt=""
                style="
                    width: 308rpx;
                    height: 308rpx;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -154rpx;
                    margin-top: -154rpx;
                "
            />
        </view>
        <uni-load-more :status="collectStatus"></uni-load-more>
        <!-- </z-paging> -->
    </view>
</template>

<script>
import { getGoodsListApi, collectGoods, deleteCollect } from "@/api/shop.js";
import getphonenumber from "@/components/getphonenumber/getphonenumber.vue";
import { mapGetters } from "vuex";
import { formatDecimal } from "@/utils/index.js";
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
export default {
    data() {
        return {
            isData: false,
            collectStatus: "more",
            cellIconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            cellTitleStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            refresherStatus: 0,
            isResult: false,
            isRecord: true,
            recordList: [
                // 搜索记录
            ],
            fillterParams: {
                goodsName: "", // 商品名称
                pageNum: 1, // 当前页面
                pageSize: 10, // 每页条数
                tenantId: this.$store.getters.userInfo.tenantId,
            },
            goodsTotal: 0, // 商品总数
            dataList: [], // 数据详情
            pageData: [],
            type: "", // 那个页面进入的查询页面
        };
    },

    onReachBottom() {
        let allTotal = this.fillterParams.pageNum * this.fillterParams.pageSize;
        if (allTotal < this.goodsTotal) {
            //当前条数小于总条数 则增加请求页数
            this.collectStatus = "loading"; //加载中状态
            this.fillterParams.pageNum++;
            getGoodsListApi(this.fillterParams).then((res) => {
                if (res.code === 200) {
                    this.pageData = res.data.rows;
                    this.dataList = [...this.dataList, ...this.pageData];
                }
            });
        } else {
            this.collectStatus = "noMore";
        }
    },

    // // 下拉刷新
    // onPullDownRefresh() {
    //     this.dataList = [];
    //     this.fillterParams.pageNum = 1;
    //     //调用获取数据方法
    //     this.getGoodsList();
    // },
    computed: {
        ...mapGetters(["isLogin", "phone"]),
        goodsSkuListPrice() {
            return (item) => {
                const money = item.minPrice || item.price;
                return formatDecimal(numDiv(money, 100));
            };
        },
    },
    components: {
        getphonenumber,
    },

    onShow() {
        // 历史搜索记录
        if (uni.getStorageSync("record")) {
            this.recordList = this.unique(uni.getStorageSync("record"));
            if (uni.getStorageSync("record").length > 20) {
                this.recordList = this.unique(
                    uni.getStorageSync("record").splice(0, 20)
                );
            }
        } else {
            this.isData = true;
        }
    },
    methods: {
        // 点击搜索标签
        recordSearch(key) {
            this.fillterParams.goodsName = this.recordList[key];
            this.doSearch();
        },

        // 记录去重
        unique(recordList) {
            return Array.from(new Set(recordList));
        },

        // 点击搜索按钮
        doSearch() {
            console.log("object :>>3333 ", this.fillterParams);
            if (!this.fillterParams.goodsName)
                return uni.showToast({
                    title: "请输入商品名称",
                    icon: "none",
                });
            if (this.fillterParams.goodsName !== "") {
                // uni.startPullDownRefresh();
                this.isRecord = false;
                this.isResult = true;
                this.recordList.unshift(this.fillterParams.goodsName);
                this.getGoodsList();
                if (this.recordList.length > 0) {
                    uni.setStorageSync("record", this.recordList);
                }
                if (
                    this.recordList.length > 20 ||
                    this.recordList.length == 20
                ) {
                    this.recordList = this.recordList.splice(0, 20);
                }
            }
        },
        to_goodsDetail(e) {
            uni.$u.route({
                url: `pages_shop1/goods/index?id=${e}`,
            });
        },
        getGoodsList() {
            const params = {
                ...this.fillterParams,
            };
            console.log("333333333333 :>> ", params);
            getGoodsListApi(params)
                .then((res) => {
                    if (res.code === 200) {
                        this.dataList = res.data.rows;
                        this.goodsTotal = res.data.total;
                        uni.stopPullDownRefresh();
                    }
                })
                .catch((res) => {
                    this.$refs.paging.complete(false);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.searchRecord {
    margin: 10rpx 28rpx 30rpx;
    font-size: 14px;
    font-family: PingFang SC-粗体, PingFang SC;
    font-weight: normal;
    line-height: 68rpx;
    background: url(@/pages_shop1/static/img/shop/group.png);
    width: 694rpx;
    height: 68rpx;
}

.search {
    padding: 40rpx 28rpx;
}

.search_t {
    width: 100%;
    height: 64rpx;
    background: #e1e1e1;
    border-radius: 64rpx;
    font-weight: none;
    display: flex;
    justify-content: space-between;
}

.search_type {
    width: 104rpx;
    height: 64rpx;
    background: #588bf3;
    border-radius: 0px 64rpx 64rpx 0px;
    color: #fff;
    line-height: 64rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
}

.recordTag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 730rpx;
    margin-top: 20rpx;
    padding: 0 28rpx;
}

.tag {
    padding: 10rpx 20rpx;
    background-color: #eef7ff;
    font-size: 28rpx;
    margin-bottom: 24rpx;
    margin-right: 40rpx;
    height: 52rpx;
    text-align: center;
    line-height: 32rpx;
    border-radius: 26rpx;
}

.top {
    padding: 36rpx 28rpx;
}

.page {
    background-color: #ffffff;
    height: 100vh;
}

.item {
    padding: 0rpx 34rpx;
    box-sizing: border-box;
    flex-flow: wrap;
    background-color: #ffffff;
}

.cellBox {
    position: relative;
    border-radius: 12rpx;
    width: 330rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);

    ::v-deep .u-cell__body {
        padding: 0 !important;
    }
}

.celldetail {
    width: 100%;
    height: 454rpx;
}

.shopping-cart-box {
    position: absolute;
    bottom: 14rpx;
    width: 100%;
    padding: 0 12rpx;
    box-sizing: border-box;

    .shopping-cart {
        align-items: center;
        justify-content: flex-end;
        padding-right: 10rpx;

        text {
            color: #ff0000;
            font-size: 18rpx;
            font-weight: 400;
        }
    }
}

.celldetail-img {
    width: 100%;
    height: 330rpx;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
}

.celldetail-t {
    width: 100%;
    padding: 0 12rpx;
    box-sizing: border-box;

    text {
        width: 100%;
        font-size: 28rpx;
        color: #333;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    view {
        margin: 28rpx 0 0 6rpx;
    }
}
</style>
